<template>
    <div class="image-gallery">
        <el-card class="gallery-card">
            <template #header>
                <div class="card-header">
                    <span>图片分类展示</span>
                </div>
            </template>

            <el-form :inline="true" class="gallery-form">
                <el-form-item label="分类">
                    <el-select
                        v-model="selectedCategory"
                        placeholder="请选择分类"
                        style="width: 240px"
                    >
                        <el-option
                            v-for="category in categories"
                            :key="category.value"
                            :label="category.label"
                            :value="category.value"
                        />
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="fetchImages" :loading="loading"
                        >查询</el-button
                    >
                </el-form-item>
            </el-form>

            <div v-if="error" class="error-message">
                <el-alert :title="error" type="error" show-icon />
            </div>

            <div v-if="loading" class="loading-container">
                <el-skeleton :rows="6" animated />
            </div>

            <div v-else class="gallery-content">
                <div v-if="imageUrl" class="single-image-wrapper">
                    <el-image
                        :src="imageUrl"
                        fit="contain"
                        :preview-src-list="[imageUrl]"
                        :initial-index="0"
                        class="single-image"
                    />
                    <div class="image-actions">
                        <el-button
                            type="primary"
                            size="small"
                            @click="downloadImage(imageUrl)"
                            :icon="Download"
                            circle
                        />
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { Download } from '@element-plus/icons-vue'

// 分类数据
const categories = ref([
    { label: '原神', value: '原神' },
    { label: 'PC', value: 'pc' },
    { label: 'PE', value: 'pe' },
    { label: 'AI', value: 'ai' },
    { label: '萌版', value: '萌版' },
    { label: '头像', value: '头像' },
    { label: '风景', value: '风景' }
])

const selectedCategory = ref('pc') // 默认选中PC分类
const loading = ref(false)
const error = ref('')
const imageUrl = ref('')

const fetchImages = async () => {
    try {
        loading.value = true
        error.value = ''
        imageUrl.value = ''

        // 直接获取图片，默认type=image
        imageUrl.value = `https://api.yujn.cn/api/gzl_ACG.php?form=${selectedCategory.value}&type=image&timestamp=${new Date().getTime()}`
    } catch (err) {
        error.value = `获取图片失败: ${err.message}`
        console.error('Error fetching images:', err)
    } finally {
        loading.value = false
    }
}

const downloadImage = (url) => {
    const link = document.createElement('a')
    link.href = url
    link.download = `image-${new Date().getTime()}.jpg`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
}

// 初始加载
fetchImages()
</script>

<style lang="scss" scoped>
// 何时用 :deep()？
// 修改第三方组件样式
// 比如调整 Element UI 的 <el-form-item> 的间距、颜色等。

// 子组件内部元素样式覆盖
// 当需要修改子组件内非根元素的样式时（如 <el-form-item> 内部的 <label>）。

// 何时不用 :deep()？
// 当前组件自有样式
// 如果 .el-form-item 是你当前组件的普通 DOM 元素，直接写选择器即可。

// 子组件支持 props/ CSS 变量
// 优先通过子组件提供的 API（如 size="small" 或 --el-form-item-margin）定制样式，而非强行穿透。

.image-gallery {
    box-sizing: border-box;
    height: 100vh;
    padding: 20px;

    .gallery-card {
        border-radius: 8px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

        .card-header {
            font-size: 18px;
            font-weight: 600;
            color: var(--el-text-color-primary);
        }

        .gallery-form {
            margin-bottom: 20px;

            :deep(.el-form-item) {
                margin-right: 20px;
            }
        }

        .error-message {
            margin-bottom: 20px;
        }

        .loading-container {
            padding: 20px 0;
        }

        .gallery-content {
            .single-image-wrapper {
                display: flex;
                flex-direction: column;
                align-items: center;
                // margin: 20px 0;
                position: relative;

                .single-image {
                    max-width: 100%;
                    max-height: 70vh;
                    border-radius: 4px;
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                }

                .image-actions {
                    margin-top: 15px;
                }
            }
        }
    }
}

@media (max-width: 768px) {
    .image-gallery {
        padding: 0 10px;

        .gallery-card {
            .gallery-form {
                /* 穿透作用域，强制修改子组件 .el-form-item 的样式 */
                :deep(.el-form-item) {
                    margin-right: 10px;
                    margin-bottom: 10px;
                }
            }
        }
    }
}
</style>
